<template>
    <div>
        <div class="dialog-wrap">
            <div class="dialog-cover" v-if="isShow" @click="closeDialog"></div>
            <transition name="drop">
                <div class="dialog-content" v-if="isShow">
                    <p class="dialog-close" @click="closeDialog">X</p>
                    <slot>empty</slot>
                </div>
            </transition>
        </div>
    </div>
</template>

<script>
export default {
    name:"myDialog",
    props:{
        isShow:{
            type:Boolean,
            default:true
        }
    },
    methods:{
        closeDialog:function(){
            this.isShow=false;
            setTimeout(function(){
                location.reload();   
            },500)
              
        }
    }
}

</script>

<style>
.drop-enter-active{
    transition: all 0.5s ease;
}
.drop-leave-active{
    transition: all 0.5s ease;
}
.drop-enter{
    transform: translateY(-700px);
}

.drop-leave{
    transform: translateY(-700px);
}

.dialog-wrap{
    position: fixed;
    width: 100%;
    height: 100%;
    
}
.dialog-cover{
    background: #000;
    opacity: 0.3;
    position: fixed;
    z-index: 5;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

.dialog-content{
    width: 60%;
    position: fixed;
    max-height: 50%;
    overflow: auto;
    background: #fff;
    top:25%;
    left:50%;
    margin-left:-30%;
    z-index: 10;
    border:2px solid #464068;
    padding:2%;
    line-height: 1.6;
    border-radius:5px;
    overflow:hidden;
}

.dialog-close{
    position: absolute;
    right: 5px;
    top:5px;
    width:20px;
    height: 20px;
    text-align: center;
    cursor: pointer;
}

.dialog-close:hover{
    color:#4fc08d;
}
</style>
